<template>
  <van-cell class="schedule-item">
    <div class="left">
        <p class="start-at">{{ schedule.showAt | formatTime}}</p>
        <p class="end-at">{{ schedule.endAt | formatTime}}</p>
    </div>
    <div class="middle">
      <p class="language">{{ schedule.filmLanguage }} {{ schedule.imagery }}</p>
      <p class="hall">{{ schedule.hallName }}</p>
    </div>
    <div class="right">
      <van-button plain hairline color="#ff5f16" size="mini" class="buy-ticket" @click="toBuy()">
        {{ schedule.isOnsell ? "购票" : "停售" }}</van-button>
      <div class="lowest-price">
        <span>￥{{ schedule.salePrice / 100 }}</span>
      </div>
    </div>
  </van-cell>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: ["schedule"],
  filters:{
    formatTime(date){
      return dayjs(date * 1000).format('HH:MM')
    }
  },
  methods: {
    toBuy() {}

  },
};
</script>

<style lang="less" scoped  >
@width: 210px;

.schedule-item {
  height: 74px;
  padding: 15px 15px;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  .left{
    float: left;
    width: 84px;
    
  }
  .middle {
    float: left;
    width: 100px;
  }
  .start-at, .language {
      font-size: 15px;
      color: #191a1b;
    }
  .end-at, .hall {
    font-size: 13px;
    color: #797d82;
    margin-top: 2px;
  }
  .right{
    float: right;
    color: #ff5f16;
    padding: 10px 0;
    vertical-align: middle;
    .lowest-price {
      float: right;
      padding-right: 20px;
      font-size: 15px;
    }
    .buy-ticket{
      float: right;
      height: 25px;
      width: 50px;
      border-radius: 2px;
      position: relative;
      text-align: center;
    }
  }

}

</style>